<template>
  <div style="border:solid 1px #000;margin: 5px;padding: 10px;">
    <!--修改表单-->
    <sub-form></sub-form>
    <!--子模块-->
    <sub-module></sub-module>
    <hr>
    <!--查询-->
    <sub-find></sub-find>
    <hr>
    <!--列表-->
    <sub-grid></sub-grid>
    <hr>
    <!--分页-->
    <sub-comp-pager></sub-comp-pager>
  </div>
</template>

<script setup lang="ts">
  // 加载子组件
  import subModule from './35-digui-son.vue'
  // 加载分页组件
  import subCompPager from './40-digui-pager.vue'
  // 列表
  import subGrid from './46-digui-grid.vue'
  // 查询
  import subFind from './42-digui-find.vue'
  // 表单
  import subForm from './45-digui-form.vue' 
  // 列表页面的状态
  import { regListState } from './_state-data-list'
  // 引入接口
  import type { IQuery, IPagerInfo } from '../../types/type'

  // 获取数据，模拟一下
  const getData = async (query: IQuery, pagerInfo: IPagerInfo) => {
    // 根据参数获取数据
    // console.log(query, pagerInfo)
    
    let i = 1
    const re = {
      allCount: 1000,
      list: [
        {
          id: pagerInfo.pagerIndex * 10 + i,
          name: `数据测试：${pagerInfo.pagerIndex} -- ${i++}`,
          address: `xxx省xx市区--${i}`,
          telephone: `139${i}${i + 1}${i + 4}${i}`
        },
        {
          id: pagerInfo.pagerIndex * 10 + i,
          name: `数据测试：${pagerInfo.pagerIndex} -- ${i++}`,
          address: `xxx省xx市区--${i}`,
          telephone: `139${i}${i + 1}${i + 4}${i}`
        },
        {
          id: pagerInfo.pagerIndex * 10 + i,
          name: `数据测试：${pagerInfo.pagerIndex} -- ${i++}`,
          address: `xxx省xx市区--${i}`,
          telephone: `139${i}${i + 1}${i + 4}${i}`
        },
        {
          id: pagerInfo.pagerIndex * 10 + i,
          name: `数据测试：${pagerInfo.pagerIndex} -- ${i++}`,
          address: `xxx省xx市区--${i}`,
          telephone: `139${i}${i + 1}${i + 4}${i}`
        },
        {
          id: pagerInfo.pagerIndex * 10 + i,
          name: `数据测试：${pagerInfo.pagerIndex} -- ${i++}`,
          address: `xxx省xx市区--${i}`,
          telephone: `139${i}${i + 1}${i + 4}${i}`
        },
        {
          id: pagerInfo.pagerIndex * 10 + i,
          name: `数据测试：${pagerInfo.pagerIndex} -- ${i++}`,
          address: `xxx省xx市区--${i}`,
          telephone: `139${i}${i + 1}${i + 4}${i}`
        }
      ]
    }
    return re
  }

  // 注册列表页面的状态
  const state = regListState(getData)
  
  console.log('statepp\n', state)

</script>